<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽</title>
	<script src = "https://code.jquery.com/jquery-3.4.0.js"></script>
	<style>
		img {
			width: 120px;
			height: 120px;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<img src="img/1.gif" alt="">
</body>
<script>
	console.log(getCookie("oX"),getCookie("oY"))
	$("img").css({left:parseFloat(getCookie("oX")),top:parseFloat(getCookie("oY"))})
	
	$("img").mousedown(function(ev){
		var l,t;
		var disX = ev.pageX - $("img").offset().left
		var disY = ev.pageY - $("img").offset().top

		$(document).mousemove(function(ev){
				l = ev.pageX - disX
				t = ev.pageY - disY
			
			//限制范围
			var maxl = $(window).innerWidth() - $("img").width()
			var maxt = $(window).innerHeight() - $("img").height()
			l = l>maxl?maxl:l<0?0:l;
			t = t>maxt?maxt:t<0?0:t;
			$("img").css({left:l,top:t})
		})
		$(document).mouseup(function(){
			setCookie("oX",l,7)
			setCookie("oY",t,7)
			$(document).off()
		})
		return false; //阻止默认事件
	})

	function setCookie(n,v,t){
		var d = new Date()
		d.setDate(d.getDate()+t)
		// console.log(d)
		document.cookie = n+"="+v+";expires="+d
	}
	// setCookie("pass","132",7)
	console.log(document.cookie)

	//删除某个cookie	
	function removeCookie(n){
		setCookie(n,"",-1)
	}
// 	//取 候一
// 	参数：N 代表 cookie里存数据的名称
	function getCookie(n){
		var cookie = document.cookie; //所有存的数据
		var arr = cookie.split("; ") //分隔成数组
		for(var i = 0;i<arr.length;i++){
			var arr1 = arr[i].split("=") //["user","候一"]
			if(arr1[0]==n){
				// arr1[0]
				return arr1[1]
			}
		}
}
</script>
</html>